<template>
  <div class="home-wrapper">
    <div class="cards">
      <div class="item">
        <Card icon="el-icon-user-solid" :color="red" :number="30" subTitle="关注人数(个)" />
      </div>
      <div class="item">
        <Card icon="el-icon-s-finance" :number="120" subTitle="订单总数(笔)" />
      </div>
      <div class="item">
        <Card
          icon="el-icon-s-order"
          :number="4183.8"
          subTitle="今日订单总金额(元)"
        />
      </div>
      <div class="item">
        <Card icon="el-icon-s-data" :number="100" subTitle="本月销量(笔)" />
      </div>
    </div>
    <!-- 22222222222222222 -->
    <div class="second-box">
      <div class="state-cards">
        <div class="item">
          <StateCard :number="64" state="出售中" />
        </div>
        <div class="item">
          <StateCard :number="64" state="出售中" />
        </div>
        <div class="item">
          <StateCard :number="64" state="出售中" />
        </div>
        <div class="item">
          <StateCard :number="64" state="出售中" />
        </div>
      </div>
      <div class="charts" ref="echarts"></div>
    </div>
  </div>
</template>

<script>
import Card from "./components/Cart";
import StateCard from "./components/StateCard";
import * as echarts from "echarts";

export default {
  name: "Home",
  components: { Card, StateCard },
  methods: {
    /**
     * 初始化报告
     */
    initReport() {
      const chart = echarts.init(this.$refs.echarts);
      chart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "邮件营销",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "联盟广告",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "视频广告",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [150, 232, 201, 154, 190, 330, 410],
          },
          {
            name: "直接访问",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [320, 332, 301, 334, 390, 330, 320],
          },
          {
            name: "搜索引擎",
            type: "line",
            stack: "Total",
            label: {
              show: true,
              position: "top",
            },
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [820, 932, 901, 934, 1290, 1330, 1320],
          },
        ],
      });
    },
  },
  mounted() {
    this.initReport();
  },
};
</script>

<style lang="scss" scoped>
.home-wrapper {
  padding: 20px;
  height: 100%;
  background-color: rgb(222, 228, 233);
  .second-box {
    display: flex;
    & > div {
      flex: 1;
    }

    .state-cards {
      display: flex;
      background: white;
      .item {
        flex: 1;
        padding: 0 10px;
      }
    }
    .charts {
      height: 310px;
      width: 1100%;
      background: white;
      margin-left: 10px;
    }
  }

  .cards {
    display: flex;
    margin-bottom: 20px;
    .item {
      flex: 1;
      padding: 0 10px;
      &:first-child {
        padding-left: 0;
      }
      &:last-child {
        padding-right: 0;
      }
    }
  }
}
</style>